<template>
  <view class="customer_service">
    <view class="customer_service_hd">
      <!-- 问题提交 -->
      <!-- <text v-bind:class="{'current':current}" @click="submitBox">问题提交</text><text v-bind:class="{'current':!current}"
        @click="selectEnd">结果查询</text> -->
    </view>
    <!-- 问题提交 -->
    <view class="customer_service_bd">
      <view class="txt-desc1">
        <text>问题订单:</text><text class="oid">{{orderId}}</text>
      </view>
      <view class="txt-desc2">
        <view class="txt-desc2-hd">
          <text>问题描述</text>
        </view>
        <textarea placeholder-style="color:#999" v-model="valueTxt" maxlength="500" focus
          placeholder="请输入问题描述(最多500字)" />

      </view>
      <view class="txt-desc3">
        <view class="txt-desc3-title">
          <text>上传截图</text>
          <view> <text style="color:#F05552;">{{imageValue.length}}</text>/3</view>
        </view>
        <view class="up-pic">
          <uni-forms ref="baseForm" :modelValue="baseFormData" :rules="rules" label-position="top">
            <uni-forms-item label="图片上传">
              <uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid"   @select="select" @delete="delIMG"
                limit="3">
                <image src="https://img.5211game.com/Base/xiaochengxu/static/add.png" mode=""></image>
              </uni-file-picker>
            </uni-forms-item>
          </uni-forms>
          </uni-file-picker>
        </view>
      </view>
      <view class="txt-desc4">
        <view class="txt-desc4-title">
          联系电话
        </view>
        <input class="uni-input" placeholder="请输入手机号码" v-model="phone" />
      </view>

      <view class="txt-tips">
        <view class="txt-tips-red">
          温馨提示
        </view>
        <view class="txt-tips-contxt">
          您提交的问题，正常情况下我们会在2小时内给予答复。
        </view>
        <view class="txt-tips-contxt">
          客服热线：021-23099155（每日9:00-21:00）
        </view>
      </view>

      <view class="submit-btn" @click="submitFn">
        提交
      </view>
    </view>
    <!-- 问题提交 -->


  </view>
</template>

<script>
  export default {
    data() {
      return {
        imgURL: '',
        imageValue: [],
        valueTxt: '',
        imgLts: [],
        orderId: '',
        phone: '',
        username: '',
        uid: 0,
        current: true,
        ltsInfo: []
      };
    },
    onLoad(options) {
      console.log(options)
      if (options.orderId) {
        this.orderId = options.orderId;

      }

    },
    methods: {
      // 获取上传状态
      select(e) {
        const tempFilePaths = e.tempFilePaths;
        const imgUrl = tempFilePaths[0]
        uni.showLoading({
          title:"上传中...",
          mask:true
        })
        wx.uploadFile({
          url: 'https://zxkf.5211game.com/QSWebApi/KfApplet/Action?t=imgUpLoad',
          filePath: imgUrl,
          name: 'imgUrl',
          header: {
            "Content-Type": "multipart/form-data"
          },
          success: (uploadFileRes) => {
            console.log(13,uploadFileRes.data)
            uni.hideLoading();
            if(JSON.parse(uploadFileRes.data).code == 0){
              //console.log('uploadFileRes', JSON.parse(uploadFileRes.data));
               let path = JSON.parse(uploadFileRes.data)
             // console.log(path.data)
               // 后端返回的地址，存入图片地址
               this.imageValue.push({
                 url: path.data[0].img,
                 name: ''
               })
            }else{
              console.log(11)
              uni.showModal({
                title:'上传失败',
                duration: 2000,
                showCancel: false, //没有取消按钮的弹框
                buttonText: '确定',
                success(res) {
                  console.log(res)
                }
              });
            }
  
          //  console.log('imageValue', this.imageValue)
          }
        });
      },
      // 获取上传进度
      progress(e) {
        console.log('上传进度：', e)
      },
      //图片删除
      delIMG(e) {
        console.log('456', e)
        const num = this.imageValue.findIndex(v => v.url === e.tempFilePath);
        this.imageValue.splice(num, 1);
      },
      // 上传成功
      success(e) {
        console.log('上传成功')
      },
      // 上传失败
      fail(e) {
        console.log('上传失败：', e)
      },
      submitFn() {
        if (this.valueTxt == '') {
          uni.$showMsg('请填写问题描述!');
          return false;
        } else if (this.phone == '') {
          uni.$showMsg('请填写手机号码!');
          return false;
        } else {
          if (uni.getStorageSync('userinfo')) {
            this.username = JSON.parse(uni.getStorageSync('userinfo')).userName;
            this.uid = JSON.parse(uni.getStorageSync('userinfo')).userId
          }
         // console.log('this.imageValue0', this.imageValue[0].url)
           var img1,img2,img3;
           if(this.imageValue.length>0){
             this.imageValue.forEach((item, index) => {
               if (index == 0) {
                 img1= item.url
               } else if (index == 1) {
                 img2 = item.url
               } else if (index == 2) {
                 img3 = item.url
               }
             })
           }
          const dataString = {
            ServerType: 27,
            ServerContent: 81,
            GameZone: 5,
            img1: img1,
            img2: img2,
            img3: img3,
            GameRoom: 172,
            QuestionInfo: `${this.valueTxt}`,
            TellPhone: this.phone,
            QuestionTitle: `商城小程序订单异常-${this.orderId}`,
            UserGameId: this.username,
            UserId: this.uid
          };
          console.log(11, JSON.stringify(dataString))
          uni.request({
            url: `https://zxkf.5211game.com/QSWebApi/KfApplet/Action?data=${JSON.stringify(dataString)}&t=KfApplet`,
            header: {
              'Content-Type': 'application/json' //自定义请求头信息
            },
            method: 'GET', //请求方式，必须为大写
            success: (res) => {
              this.valueTxt = '';
              this.imgLts = [];
              this.phone = '';
              this.username = '';
              this.uid = '';
              this.imageValue = [];
              uni.showModal({
                title: res.data.msg,
                showCancel: false, //没有取消按钮的弹框
                buttonText: '确定',
                duration: 2000,
                success: (res) => {
                  if (res.confirm) {
                    uni.navigateTo({
                      url: '/subpkg/questionResult/questionResult'
                    })
                  } else {
                    uni.navigateTo({
                      url: '/subpkg/questionResult/questionResult'
                    })
                  }
                }
              })

            }
          })
        }
      },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }

  .customer_service {
    .customer_service_hd {
      width: 100%;
      height: 30rpx;
      display: flex;
      justify-content: center;
      margin-bottom: 30rpx;

      text {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        margin: 0 50rpx;
        position: relative;

        &.current::after {
          content: '';
          width: 98rpx;
          height: 4rpx;
          background: #FFA000;
          border-radius: 2rpx;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 20rpx;
          font-size: 26px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #FFA000;
        }
      }
    }

    .customer_service_bd {
      width: 710rpx;
      margin: 0 auto;

      .txt-desc1 {
        width: 690rpx;
        margin: 0 auto;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        display: flex;
        justify-content: flex-start;
        margin-bottom: 30rpx;

        .oid {
          margin-left: 20rpx;
        }
      }

      .txt-desc2 {
        width: 690rpx;
        margin: 0 auto;
        margin-bottom: 30rpx;

        .txt-desc2-hd {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
          display: flex;
          justify-content: space-between;
          margin-bottom: 30rpx;
        }

        textarea {
          width: 650rpx;
          height: 220rpx;
          background: #F5F5F5;
          font-size: 24rpx;
          font-family: PingFang SC;
          border: 1px solid #ccc;
          padding: 10rpx;
        }
      }

      .txt-desc3 {
        width: 690rpx;
        margin: 0 auto;
        margin-bottom: 30rpx;

        .txt-desc3-title {
          width: 100%;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
          display: flex;
          justify-content: space-between;
          margin-bottom: 30rpx;
        }

        image {
          width: 172rpx;
          height: 172rpx;
        }
      }

      .txt-tips {
        width: 690rpx;
        margin: 0 auto;
        margin-bottom: 60rpx;

        .txt-tips-red {
          font-size: 20rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #F05552;
          text-align: left;
          margin-bottom: 10rpx;
        }

        .txt-tips-contxt {
          font-size: 20rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666666;
          margin-bottom: 10rpx;
        }
      }

      .txt-desc4 {
        width: 690rpx;
        margin: 0 auto;
        margin-bottom: 30rpx;

        .txt-desc4-title {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
          margin-bottom: 20rpx;
        }

        .uni-input {
          color: #333333;
        }

        input {
          width: 670rpx;
          height: 80rpx;
          line-height: 80rpx;
          background: #F5F5F5;
          border-radius: 12rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #F5F5F5;
          padding-left: 20rpx;
        }
      }

      .submit-btn {
        width: 690rpx;
        margin: 0 auto;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        background: #FFA000;
        border-radius: 6rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
      }

      .customer_service_bd_list {
        width: 710rpx;
        margin: 0 auto;
        overflow: hidden;
        zoom: 1;

        .customer_service_bd_list_item {
          width: 710rpx;
          min-height: 324rpx;
          margin: 0 auto;
          background: #FFFFFF;
          border-radius: 12rpx;
          margin-bottom: 60rpx;
          border-bottom: 2rpx dashed #ccc;

          .customer_service_bd_list_item_hd {
            width: 100%;
            display: flex;
            justify-content: space-between;
            font-size: 22rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #1A1A1A;
            margin-bottom: 30rpx;

            .redcurrent {
              color: red;
            }
          }

          .customer_service_bd_list_item_title {
            width: 710rpx;
            margin: 0 auto;
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #808080;
            display: flex;
            justify-content: flex-start;
            margin-bottom: 30rpx;

            text {
              text-align: lef;
            }
          }

          .customer_service_bd_list_item_desc {
            width: 710rpx;
            margin: 0 auto;
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #808080;
            display: flex;
            justify-content: flex-start;
            margin-bottom: 40rpx;

            text {
              text-align: lef;
            }
          }

          .customer_service_bd_list_item_order {
            width: 662rpx;
            margin: 0 auto;
            height: 68rpx;
            line-height: 68rpx;
            background: #F5F5F5;
            display: flex;
            justify-content: flex-start;
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
            padding-left: 20rpx;
          }
        }
      }
    }
  }
</style>